
    <template>
 <div class="card">
        <div class="auto-scroll-table-container" ref="tableContainer">

            <el-table :data="tableData" border style="width: 100%" @mouseenter="stopScroll" @mouseleave="createScroll"
                ref="tableRef">

                <el-table-column v-for="column in columns" :key="column.prop" :prop="column.prop" :label="column.label"
                    :width="column.width" />

            </el-table>

        </div>
</div>
    </template>

<script setup>

import { ref, onMounted, onUnmounted, nextTick } from 'vue';

// 定义表格列配置

const columns = [

    { prop: 'date', label: '日期', width: 180 },

    { prop: 'name', label: '姓名', width: 180 },

    { prop: 'address', label: '地址' },

];

// 生成模拟数据

const generateTableData = () => {

    const data = [];

    for (let i = 0; i < 100; i++) {

        data.push({

            date: `2023-0${(i % 9) + 1}-${(i % 28) + 10}`,

            name: `用户${i + 1}`,

            address: `北京市朝阳区建国路${i * 10 + 100}号，这是一个较长的地址信息，用于确保表格内容足够长以产生滚动效果。`,

        });

    }

    return data;

};

const tableData = ref(generateTableData());

const tableContainer = ref(null);

const tableRef = ref(null);

let timer = null;

// 停止滚动

const stopScroll = () => {

    clearInterval(timer);

    timer = null;

};
// 模拟加载更多数据（实际应用中应从API获取）
const concatFun = () => {
  if (tableData.value.length <= 4) {
    return;
  }
  // 使用 slice 方法复制 showData
  const copiedData = [...tableData.value];
  // 将复制的数据追加到原 showData
  tableData.value = [...tableData.value, ...copiedData];
};
concatFun()
// 创建滚动效果

const createScroll = () => {

    stopScroll(); // 先清除已有的定时器

    // 确保DOM已更新

    nextTick(() => {

        // 获取表格滚动容器

        const table = tableRef.value.layout.table.refs;

        const tableWrapper = table.bodyWrapper.firstElementChild.firstElementChild;

        // 设置滚动定时器

        timer = setInterval(() => {

            tableWrapper.scrollTop += 1; // 每次滚动1px

            // 检测是否滚动到了底部

            if (tableWrapper.clientHeight + tableWrapper.scrollTop >= tableWrapper.scrollHeight - 1) {

                // tableWrapper.scrollTop = 0; // 回到顶部，实现循环
                tableWrapper.scrollTop =tableWrapper.scrollTop - tableWrapper.scrollHeight / 2;//回到中间实现数据无限循环

            }

        }, 100); // 滚动间隔，控制滚动速度

    });

};

// 组件挂载时启动滚动

onMounted(() => {

    createScroll();

});

// 组件卸载时清理定时器

onUnmounted(() => {

    stopScroll();

});

</script>

<!-- 样式优化
为了实现更好的视觉效果，我们需要对表格样式进行定制： -->


<style scoped>
.auto-scroll-table-container {

    width: 100%;

    max-width: 1000px;

    margin: 0 auto;

    height: 400px;
    /* 固定容器高度 */

    overflow: hidden;

    border: 1px solid #e5e7eb;

}

/* 关键样式：使用深度选择器穿透Element Plus样式 */

::v-deep .el-table {

    height: 100% !important;

    overflow: hidden;

}

::v-deep .el-table__body-wrapper {

    max-height: calc(100% - 58px) !important;
    /* 减去表头高度 */

    overflow-y: auto !important;

    scrollbar-width: none;
    /* 隐藏Firefox滚动条 */

    -ms-overflow-style: none;
    /* 隐藏IE滚动条 */

}

/* 隐藏Chrome滚动条 */

::v-deep .el-table__body-wrapper::-webkit-scrollbar {

    display: none;

}

::v-deep .el-table__header-wrapper {

    overflow: hidden !important;
    /* 固定表头 */

}
</style>
<style scoped>
.chart-container {
    flex: 1;
    min-height: 250px;
    width: 100%;
    border-bottom: 1px solid #eaf3ff;
    margin-bottom: 20px;
}

.auto-scroll-table-container {

    width: 100%;

    max-width: 1000px;

    margin: 0 auto;

    height: 330px;
    /* 固定容器高度 */

    overflow: hidden;

    border: 1px solid #e5e7eb;

}

/* 关键样式：使用深度选择器穿透Element Plus样式 */

::v-deep .el-table {

    height: 100% !important;

    overflow: hidden;

}

::v-deep .el-table__body-wrapper {

    max-height: calc(100% - 58px) !important;
    /* 减去表头高度 */

    /* overflow-y: auto !important; */

    scrollbar-width: none;
    /* 隐藏Firefox滚动条 */

    -ms-overflow-style: none;
    /* 隐藏IE滚动条 */

}

/* 隐藏Chrome滚动条 */

::v-deep .el-table__body-wrapper::-webkit-scrollbar {

    display: none;

}

::v-deep .el-table__header-wrapper {

    overflow: hidden !important;
    /* 固定表头 */

}
</style>
